<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2"
          ><div class="mine-article-header-pic">
            <img
              :src="
                userUrl(articleItem.avatar)
                  ? userUrl(articleItem.avatar)
                  : defalutAvatar
              "
            /></div
        ></el-col>
        <el-col :span="22" class="mine-article-content-wrap-right">
          <el-row>
            <el-col :span="6"
              ><div class="mine-article-top-left">
                <div class="mine-article-top-left-title">
                  {{ articleItem.nickname || "匿名" }}
                </div>
                <div
                  class="mine-article-top-left-time"
                  @click="toCommentDetail"
                >
                  {{ articleItem.createTime | dateFormat }}
                </div>
              </div></el-col
            >
            <el-col :span="16"
              ><div class="mine-article-top-right">
                <div class="attention-wraper">
                  <div :class="['focus', articleItem.focus ? 'isFocus' : '']">
                    <div v-if="!articleItem.focus" @click="focusArticle()">
                      <i class="el-icon-plus"></i>
                      关注
                    </div>
                    <div v-else>已关注</div>
                  </div>
                </div>
                <div class="more-operate">
                  <el-dropdown @command="clickMoreMenu">
                    <span class="el-dropdown-link">
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="collection">{{
                        articleItem.collection ? "取消收藏" : "收藏"
                      }}</el-dropdown-item>
                      <el-dropdown-item command="focus" v-if="articleItem.focus"
                        >取消关注</el-dropdown-item
                      >
                      <el-dropdown-item command="copyLink"
                        >复制链接</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="detele-edit-wrap" v-if="showDeleteEdit">
                  <div class="detele">
                    <i class="el-icon-delete" @click="deleteArticle"></i>
                  </div>
                  <div class="edit">
                    <i class="el-icon-edit" @click="showEditDialog"></i>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22"
              ><div class="content-wrap-text" @click="toCommentDetail">
                {{ articleItem.content }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <!-- 图片视频布局 -->
            <el-col :span="20"
              ><div class="image-video-wrap">
                <!-- 图片布局 -->
                <div class="images-wrap">
                  <template v-if="imagesURL.length === 1">
                    <!-- 单图布局 -->
                    <template v-if="!imagesURL[0].endsWith('.mp4')">
                      <el-image
                        v-for="(item, i) in imagesURL"
                        :key="i"
                        class="image-1"
                        :src="item"
                        fit="fill"
                        :preview-src-list="imagesURL"
                        lazy
                    /></template>
                    <template v-else>
                      <!-- 视频 -->
                      <video
                        :src="imagesURL[0]"
                        class="video"
                        controls="controls"
                      >
                        您的浏览器不支持视频播放
                      </video>
                    </template>
                  </template>
                  <template v-else-if="imagesURL.length === 2">
                    <!-- 2图布局 -->
                    <el-image
                      v-for="(item, i) in imagesURL"
                      :key="i"
                      class="image-2"
                      :src="item"
                      fit="fill"
                      :preview-src-list="imagesURL"
                      lazy
                  /></template>
                  <template v-else-if="imagesURL.length === 3">
                    <!-- 3图布局 -->
                    <el-image
                      v-for="(item, i) in imagesURL"
                      :key="i"
                      class="image-3"
                      :src="item"
                      fit="fill"
                      :preview-src-list="imagesURL"
                      lazy
                    />
                  </template>
                  <template v-else-if="imagesURL.length === 4">
                    <!-- 4图布局 -->
                    <el-image
                      v-for="(item, i) in imagesURL"
                      :key="i"
                      class="image-4"
                      :src="item"
                      fit="fill"
                      :preview-src-list="imagesURL"
                      lazy
                    />
                  </template>
                  <template v-else-if="imagesURL.length > 4">
                    <!-- 多图布局 -->
                    <el-image
                      v-for="(item, i) in imagesURL"
                      :key="i"
                      class="image-5-9"
                      :src="item"
                      fit="fill"
                      :preview-src-list="imagesURL"
                      lazy
                  /></template>
                </div>

                <!-- 视频布局 -->
                <!-- <video
                  class="video-cell"
                  v-if="{{item.circle_video}}"
                  src="{{item.circle_video}}"
                  mode="aspectFill"
                  show-mute-btn="true"
                  muted="false"
                ></video> -->
              </div></el-col
            >
          </el-row>
          <el-row class="hudon-wrap">
            <!-- 互动区域 -->
            <!-- 分享 -->
            <el-col :span="6" class="hudon-share">
              <span>
                {{ articleItem.forwardCount }}
              </span>
              <el-popover
                placement="bottom"
                title="分享"
                width="250"
                trigger="click"
                @show="showShareDialog"
              >
                <i
                  slot="reference"
                  :class="[
                    'el-icon-share',
                    'hudon',
                    articleItem.share ? 'active' : '',
                  ]"
                ></i>
                <!-- 分享弹窗 -->
                <div id="share-wrap">
                  <el-image
                    fit="fill"
                    :src="
                      userUrl(shareArticleQRCode)
                        ? userUrl(shareArticleQRCode)
                        : defalutAvatar
                    "
                  />

                  <div class="copy-wrap">
                    <el-input
                      v-model="shareArticleUrl"
                      style="width: 150px"
                      :disabled="true"
                    ></el-input>
                    <el-button @click="copyLink">复制链接</el-button>
                  </div>
                </div>
              </el-popover>
            </el-col>
            <!-- 评论 -->
            <el-col
              :span="6"
              :class="['hudon-chat', isShowComment ? 'activeComment' : '']"
            >
              <span @click="chatArticle">
                <i class="el-icon-chat-dot-square hudon"></i>
                {{ articleItem.commentCount }}
              </span></el-col
            >
            <!-- 点赞 -->
            <el-col :span="6" class="hudon-dianzhan">
              <span @click="operateArticle('like')">
                <i
                  :class="[
                    'icon-dianzan',
                    'iconfont',
                    'hudon',
                    articleItem.like ? 'active' : '',
                  ]"
                ></i>
                {{ articleItem.likeCount }}
              </span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <!-- 发表评论 -->
      <div class="comment-send-wrap" v-if="isShowComment">
        <el-row>
          <el-col :span="2"
            ><div class="comment-send-pic">
              <img
                :src="
                  userUrl(userInfo.avatar)
                    ? userUrl(userInfo.avatar)
                    : defalutAvatar
                "
                alt=""
              /></div
          ></el-col>
          <el-col :span="20" class="comment-send-input-give">
            <el-row>
              <el-col :span="20">
                <el-input
                  placeholder="发布你的评论"
                  v-model="commentForm.commentContext"
                  clearable
                  type="textarea"
                  autosize
                >
                </el-input>
              </el-col>
            </el-row>
            <el-row>
              <!-- 笑脸 表情包输入 -->
              <el-col :span="4" class="icon-emo">
                <i
                  :class="[
                    'icon-xiaolian',
                    'iconfont',
                    showEmojiPicker ? 'active' : '',
                  ]"
                  @click="showEmojiPicker = !showEmojiPicker"
                ></i>
                <div class="emoji-picker-wrap">
                  <VEmojiPicker
                    class="emoji-picker"
                    @select="selectEmoji"
                    v-show="showEmojiPicker"
                  />
                </div>
              </el-col>
              <el-col :span="16" class="comment-give-button">
                <span class="comment-give-text" @click="giveComment()"
                  >评论</span
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 评论区 -->
      <div class="comment-wrap" v-if="isShowComment">
        <el-row
          v-for="(commentItem1, index1) in commentList"
          :key="commentItem1.i"
        >
          <!-- 当层评论 -->
          <el-col :span="2"
            ><div class="comment-article-header-pic1">
              <img
                :src="
                  userUrl(commentItem1.userAvatar)
                    ? userUrl(commentItem1.userAvatar)
                    : defalutAvatar
                "
                alt=""
              /></div
          ></el-col>
          <el-col :span="20" class="comment-article-wrap1">
            <el-row>
              <el-col :span="20"
                ><div class="comment-article-name1-text">
                  <span class="comment-article-name1">{{
                    commentItem1.nickname || "匿名"
                  }}</span>
                  <span class="comment-article-text1"
                    >：{{ commentItem1.commentContext }}</span
                  >
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="10"
                ><div class="comment-article-time1">
                  {{ commentItem1.createTime | dateFormat }} 来自{{
                    commentItem1.ipAddress
                  }}
                </div></el-col
              >
              <el-col :span="10"
                ><div class="comment-article-hudon-wrap1">
                  <!-- 评论 -->
                  <el-col :span="4">
                    <span @click="answerCommentDialogShow(commentItem1)">
                      <i class="el-icon-chat-dot-square hudon"></i>
                      {{ commentItem1.psCommentEntities.length }}
                    </span></el-col
                  >
                  <el-col :span="4">
                    <!-- 点赞 -->
                    <span @click="operateComment(commentItem1, 'like')">
                      <i
                        :class="[
                          'icon-dianzan',
                          'iconfont',
                          'hudon',
                          commentItem1.like ? 'active' : '',
                        ]"
                      ></i>
                    </span>
                  </el-col>
                  <el-col :span="2">
                    <!-- 删除 -->
                    <span
                      :class="[
                        'delete-wrap',
                        userId == commentItem1.userId ? 'show' : '',
                      ]"
                    >
                      <i
                        @click="operateComment(commentItem1, 'delete')"
                        :class="['el-icon-delete', 'hudon']"
                      ></i> </span
                  ></el-col></div
              ></el-col>
            </el-row>
          </el-col>
          <!-- 楼层下的前5条评论 -->
          <el-col
            :span="20"
            class="comment-article-wrap2"
            v-if="commentItem1.psCommentEntities.length > 0"
          >
            <el-row
              v-for="commentItem2 in commentItem1.psCommentEntities.slice(0, 5)"
              :key="commentItem2.id"
            >
              <!-- 评论 -->
              <el-row>
                <el-row>
                  <el-col :span="20"
                    ><div class="comment-article-name2-text">
                      <span class="comment-article-name2">{{
                        commentItem2.nickname || "匿名"
                      }}</span>
                      <span
                        class="comment-article-text2"
                        v-if="commentItem2.pid != commentItem1.id"
                      >
                        ：回复</span
                      >
                      <span
                        class="comment-article-name2"
                        v-if="commentItem2.pid != commentItem2.id"
                        >{{ commentItem2.toUserNickname || "匿名" }}</span
                      >
                      <span class="comment-article-text2">
                        ：{{ commentItem2.commentContext }}</span
                      >
                    </div></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="10"
                    ><div class="comment-article-time2">
                      {{ commentItem2.createTime | dateFormat }}来自{{
                        commentItem2.ipAddress
                      }}
                    </div></el-col
                  >
                  <el-col :span="10"
                    ><div class="comment-article-hudon-wrap2">
                      <!-- 回复评论 -->
                      <el-col :span="4">
                        <span @click="answerCommentDialogShow(commentItem2)">
                          <i class="el-icon-chat-dot-square hudon"></i> </span
                      ></el-col>
                      <!-- 点赞 -->
                      <el-col :span="4">
                        <span @click="operateComment(commentItem2, 'like')">
                          <i
                            :class="[
                              'icon-dianzan',
                              'iconfont',
                              'hudon',
                              commentItem2.like ? 'active' : '',
                            ]"
                          ></i>
                        </span>
                      </el-col>
                      <!-- 删除 -->
                      <el-col :span="2">
                        <span
                          :class="[
                            'delete-wrap',
                            userId == commentItem2.userId ? 'show' : '',
                          ]"
                        >
                          <i
                            class="el-icon-delete hudon"
                            @click="operateComment(commentItem2, 'delete')"
                          ></i>
                        </span>
                      </el-col></div
                  ></el-col> </el-row
              ></el-row>
            </el-row>
            <!-- 楼层下查看更多评论 -->
            <div class="more-comment2">
              <span
                v-if="commentItem1.psCommentEntities.length > 5"
                @click="showMoreComment2(index1)"
              >
                查看更多回复<i class="el-icon-caret-bottom"></i>
              </span>
              <span v-else-if="commentItem1.psCommentEntities.length > 0"
                >没有更多评论了~~</span
              >
            </div>
          </el-col>
        </el-row>
        <!-- 底部标题查看更多评论 -->
        <div class="more-comment" @click="toCommentDetail">
          {{ bottomTitle
          }}<i class="el-icon-arrow-right" v-if="parentComponent == 0"></i>
        </div>
      </div>
    </el-card>

    <!-- 二级评论展示对话框 -->
    <el-dialog
      v-if="commentList.length > 0"
      :title="commentDialogItem.psCommentEntities.length + '条回复'"
      :visible.sync="isShowComment2"
    >
      <div class="comment-dialog-wrap">
        <el-row>
          <!-- 当层评论 -->
          <el-col :span="2"
            ><div class="comment-article-header-pic1">
              <img
                :src="
                  userUrl(commentDialogItem.userAvatar)
                    ? userUrl(commentDialogItem.userAvatar)
                    : defalutAvatar
                "
                alt=""
              /></div
          ></el-col>
          <el-col :span="20">
            <el-row class="comment-article-wrap1">
              <el-row>
                <el-col :span="20"
                  ><div class="comment-article-name1-text">
                    <span class="comment-article-name1">{{
                      commentDialogItem.nickname
                    }}</span>
                    <span class="comment-article-text1"
                      >：{{ commentDialogItem.commentContext }}</span
                    >
                  </div></el-col
                >
              </el-row>
              <el-row>
                <el-col :span="12"
                  ><div class="comment-article-time1">
                    {{ commentDialogItem.createTime | dateFormat }} 来自{{
                      commentDialogItem.ipAddress
                    }}
                  </div></el-col
                >
                <el-col :span="8"
                  ><div class="comment-article-hudon-wrap1">
                    <el-col :span="4">
                      <span @click="answerCommentDialogShow(commentDialogItem)">
                        <i class="el-icon-chat-dot-square hudon"></i>
                        {{ commentDialogItem.psCommentEntities.length }}
                      </span></el-col
                    >
                    <el-col :span="4">
                      <!-- 点赞 -->
                      <span @click="operateComment(commentDialogItem, 'like')">
                        <i
                          :class="[
                            'icon-dianzan',
                            'iconfont',
                            'hudon',
                            commentDialogItem.like ? 'active' : '',
                          ]"
                        ></i>
                      </span>
                    </el-col></div
                ></el-col>
              </el-row>
            </el-row>
            <!-- 楼层下的评论 -->
            <el-row class="comment-article-wrap2">
              <el-row
                v-for="commentItem2 in commentDialogItem.psCommentEntities"
                :key="commentItem2.id"
              >
                <!-- 评论 -->
                <el-row v-if="isShowComment2">
                  <el-row>
                    <el-col :span="20"
                      ><div class="comment-article-name2-text">
                        <span class="comment-article-name2">{{
                          commentItem2.nickname || "匿名"
                        }}</span>
                        <span
                          class="comment-article-text2"
                          v-if="commentItem2.pid != commentDialogItem.id"
                        >
                          ：回复</span
                        >
                        <span
                          class="comment-article-name2"
                          v-if="commentItem2.pid != commentItem2.id"
                          >{{ commentItem2.toUserNickname || "匿名" }}</span
                        >
                        <span class="comment-article-text2">
                          ：{{ commentItem2.commentContext }}</span
                        >
                      </div></el-col
                    >
                  </el-row>
                  <el-row>
                    <el-col :span="12"
                      ><div class="comment-article-time2">
                        {{ commentItem2.createTime | dateFormat }} 来自{{
                          commentItem2.ipAddress
                        }}
                      </div></el-col
                    >
                    <el-col :span="8"
                      ><div class="comment-article-hudon-wrap2">
                        <el-col :span="4">
                          <span @click="answerCommentDialogShow(commentItem2)">
                            <i class="el-icon-chat-dot-square hudon"></i> </span
                        ></el-col>
                        <!-- 点赞 -->
                        <el-col :span="4">
                          <span @click="operateComment(commentItem2, 'like')">
                            <i
                              :class="[
                                'icon-dianzan',
                                'iconfont',
                                'hudon',
                                commentItem2.like ? 'active' : '',
                              ]"
                            ></i>
                          </span>
                        </el-col>
                        <!-- 删除 -->
                        <el-col :span="2">
                          <span
                            :class="[
                              'delete-wrap',
                              userId == commentItem2.userId ? 'show' : '',
                            ]"
                          >
                            <i
                              class="el-icon-delete hudon"
                              @click="operateComment(commentItem2, 'delete')"
                            ></i>
                          </span>
                        </el-col></div
                    ></el-col> </el-row
                ></el-row>
              </el-row>
              <!-- 楼层下查看更多评论 -->
              <div class="more-comment2">没有更多评论了</div>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 二级评论回复对话框 -->
    <el-dialog
      :title="'回复' + answeredUser"
      :visible.sync="answerCommentDialogVisible"
      @close="answerCommentDialogClose"
    >
      <el-input
        placeholder="发布你的回复"
        v-model="commentForm.commentContext"
        type="textarea"
        :rows="2"
        clearable
      >
      </el-input>
      <div class="answer-wrap">
        <el-row>
          <el-col :span="8" class="icon-emo">
            <i
              :class="[
                'icon-xiaolian',
                'iconfont',
                showEmojiPickerComment2 ? 'active' : '',
              ]"
              @click="showEmojiPickerComment2 = !showEmojiPickerComment2"
            ></i>
            <div class="emoji-picker-wrap">
              <VEmojiPicker
                class="emoji-picker"
                @select="selectEmoji"
                v-show="showEmojiPickerComment2"
              />
            </div>
          </el-col>
          <el-col :span="16" class="comment-give-button">
            <span class="comment-give-text" @click="giveComment(2)">回复</span>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 编辑文章对话框 -->
    <el-dialog
      title="编辑文章"
      :visible.sync="editArticleDialogVisible"
      @close="editArticleDialogClose"
      width="400px"
    >
      <el-form :model="editArticleForm" ref="reviseAccountFormRef">
        <el-form-item label="是否公开" :label-width="formLabelWidth">
          <el-switch
            v-model="editArticleForm.isPublish"
            active-color="#ff8200"
            inactive-color="#939393"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="能否点赞" :label-width="formLabelWidth">
          <el-switch
            v-model="editArticleForm.isLike"
            active-color="#ff8200"
            inactive-color="#939393"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="能否分享" :label-width="formLabelWidth">
          <el-switch
            v-model="editArticleForm.isForward"
            active-color="#ff8200"
            inactive-color="#939393"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="能否收藏" :label-width="formLabelWidth">
          <el-switch
            v-model="editArticleForm.isCollection"
            active-color="#ff8200"
            inactive-color="#939393"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="能否评论" :label-width="formLabelWidth">
          <el-switch
            v-model="editArticleForm.isComment"
            active-color="#ff8200"
            inactive-color="#939393"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12"
            ><div class="reset-wrap" @click="resetEditArticle">
              <div class="reset">重置</div>
            </div></el-col
          ><el-col :span="12"
            ><div class="login-wrap" @click="editArticle">
              <div class="login">保存</div>
            </div></el-col
          ></el-row
        >
      </div>
    </el-dialog>
  </div>
</template>>

<script>
import config from "@/config/index";
import { VEmojiPicker } from "v-emoji-picker";
import { mapState, mapMutations } from "vuex";
export default {
  components: { VEmojiPicker },
  // 文章数据对象
  // parentComponent 调用该评论的父组件类型 0-正常(不显示全部评论) 1-直接显示评论详情（显示全部评论）
  props: ["articleItem", "parentComponent", "commentPage"],
  mounted() {
    // 评论详情（直接显示评论）
    if (this.parentComponent == 1) {
      this.isShowComment = true;
    }

    // 判断是否显示删除 编辑图标
    if (
      this.$route.path == "/mine" &&
      this.articleItem.userId == localStorage.user_id
    ) {
      this.showDeleteEdit = true;
    }
  },
  watch: {
    articleItem: {
      handler(newVal, oldVal) {
        if (newVal.id) {
          // 获取评论列表
          this.articleItem = newVal;
          // console.log("获取评论列表detail", this.articleItem, newVal);

          this.getCommentList();
          // console.log(this.articleItem);
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
    // 监听page的变化 分页获取评论
    commentPage: {
      handler(newVal, oldVal) {
        // 获取评论列表
        if (!this.isAllComment) {
          this.queryInfo.page++;
          this.getCommentList();
        }
      },
    },
  },
  computed: {
    ...mapState("m_user", ["userInfo"]),
    bottomTitle() {
      if (this.parentComponent == 0) {
        return "查看全部评论";
      } else if (this.parentComponent == 1 && this.isAllComment) {
        return "到底了";
      }
    },
    // 添加图片前缀(图片数组)
    imagesURL() {
      let images = [];
      if (this.articleItem.images) {
        this.articleItem.images.forEach((v) => {
          images.push(config.defalutBaseURLPic + v);
        });
        return images;
      }
      return [];
    },
    // 当前弹出框评论项
    commentDialogItem() {
      if (this.commentList.length > 0) {
        return this.commentList[this.commentItemIndex];
      } else {
        return {};
      }
    },
    // 用户的userid
    userId() {
      return localStorage.user_id;
    },
  },
  data() {
    return {
      // 左侧文本的宽度
      formLabelWidth: "100px",
      // 默认头像
      defalutAvatar: config.defalutAvatar,
      // 图片展示失败默认图片
      defalutPic: config.defalutPic,
      // 评论发表对象
      commentForm: {
        // 文章id
        tweetId: "",
        // 评论用户id
        userId: "",
        // 被评论用户id
        toUserId: 0,
        // 评论内容
        commentContext: "",
        // 上级信息 0-回复文章 评论的id
        pid: 0,
      },
      // 获取评论参数
      queryInfo: {
        // aid 文章的id
        aid: 0,
        page: 1,
        limit: 10,
        // 用户的操作
        ac: "info",
      },
      // 用户操作参数
      operateInfo: {
        // 评论id
        cid: "",
        // 用户操作(like-喜欢、 delete_like-删除喜欢 delete-删除评论)
        ac: "",
      },
      // 文章评论列表
      commentList: [],
      // 当前弹出评论框的item下标
      commentItemIndex: 0,
      // 控制回复评论对话框的显示与否
      answerCommentDialogVisible: false,
      // 被回复的人
      answeredUser: "",
      // 评论是否展开
      isShowComment: false,
      // 显示表情包输入组件
      showEmojiPicker: false,
      // 二级评论是否展开
      isShowComment2: false,
      // 控制二级评论框表情包的显示
      showEmojiPickerComment2: false,
      // 一级评论是否加载完
      isAllComment: false,
      // 是否显示删除 编辑图标
      showDeleteEdit: false,
      // 控制编制文章的显示
      editArticleDialogVisible: false,
      // 编辑文章表单
      editArticleForm: {
        // 是否公开
        isPublish: true,
        isLike: true,
        isForward: true,
        isCollection: true,
        isComment: true,
      },
      // 分享文章的地址
      shareArticleUrl: "该文章不能分享!",
      // 分享文章的二维码
      shareArticleQRCode: "",
    };
  },

  methods: {
    // 点击回复评论 弹窗
    answerCommentDialogShow(commentItem) {
      // 如果用户未登录
      if (!localStorage.access_token) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      // 设置被回复人的信息
      this.commentForm.toUserId = commentItem.userId;
      this.commentForm.pid = commentItem.id;
      this.answeredUser = commentItem.nickname;
      this.answerCommentDialogVisible = true;
      this.commentForm.commentContext = "";
      console.log(this.commentForm);
    },
    // 二级评论回复对话框关闭事件
    answerCommentDialogClose() {
      this.commentForm.commentContext = "";
    },
    // 用户的头像(单张图片)
    userUrl(userUrl) {
      if (!userUrl) return null;
      // 用户的头像加地址前缀
      return config.defalutBaseURLPic + userUrl;
    },
    // 获取评论列表
    async getCommentList() {
      this.queryInfo.aid = this.articleItem.id;
      this.queryInfo.userId = localStorage.user_id;
      const { code, msg, result } = await this.$http.get(
        "/api/comment/comment_info",
        {
          params: this.queryInfo,
        }
      );
      // 加载完全部评论了
      if (result.list.length < this.queryInfo.limit) {
        this.isAllComment = true;
      }
      this.commentList = [...this.commentList, ...result.list];

      if (this.articleItem.id == 59)
        console.log(this.commentList, "0000000000000000");

      if (code != 200) {
        return this.$showMsg({
          msg: "获取文章评论数据列表失败！",
          type: "error",
        });
      }
    },

    // 操作评论 删除 点赞 取消点赞
    async operateComment(commentItem, ac = "delete") {
      // 如果用户未登录
      if (!localStorage.access_token) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      if (ac == "like" && commentItem.like) {
        ac = "delete_like";
      }
      this.operateInfo.cid = commentItem.id;
      this.operateInfo.ac = ac;
      console.log(this.operateInfo);
      const { code, msg } = await this.$http.get(
        "/api/comment/comment_action",
        {
          params: this.operateInfo,
        }
      );
      console.log(code, msg);
      if (code != 200) {
        return this.$showMsg({
          msg: "操作失败！",
          type: "error",
        });
      }
      // 局部刷新数据
      if (ac == "delete") {
        // 删除评论
        for (let i = 0; i < this.commentList.length; i++) {
          let temp = this.commentList[i];
          if (temp.id == commentItem.id) {
            this.commentList.splice(i, 1);
            return;
          }
          for (let j = 0; j < temp.psCommentEntities.length; j++) {
            if (commentItem.id == temp.psCommentEntities[j].id) {
              this.commentList[i].psCommentEntities.splice(j, 1);
              return;
            }
          }
        }
      } else if (ac == "delete_like") {
        // 取消点赞
        for (let i = 0; i < this.commentList.length; i++) {
          let temp = this.commentList[i];
          if (temp.id == commentItem.id) {
            this.commentList[i].like = false;
            return;
          }
          for (let j = 0; j < temp.psCommentEntities.length; j++) {
            if (commentItem.id == temp.psCommentEntities[j].id) {
              this.commentList[i].psCommentEntities[j].like = false;
              return;
            }
          }
        }
      } else if (ac == "like") {
        // 点赞
        for (let i = 0; i < this.commentList.length; i++) {
          let temp = this.commentList[i];
          if (temp.id == commentItem.id) {
            this.commentList[i].like = true;
            return;
          }
          for (let j = 0; j < temp.psCommentEntities.length; j++) {
            if (commentItem.id == temp.psCommentEntities[j].id) {
              this.commentList[i].psCommentEntities[j].like = true;
              return;
            }
          }
        }
      }
      return this.$showMsg({
        msg: "操作成功！",
        type: "success",
      });
    },

    // 显示评论列表
    chatArticle() {
      // // 如果用户未登录 不能查看
      // if (!localStorage.access_token) {
      //   return this.$showMsg({ msg: "请先登录!", type: "warning" });
      // }
      // 发起请求获取评论（10）
      if (this.parentComponent == 0) {
        this.isShowComment = !this.isShowComment;
      }
      // 评论详情
      else if (this.parentComponent == 1) {
        // 刷新评论
        this.queryInfo.page = 1;
        this.isAllComment = false;
        this.commentList = [];
        this.getCommentList();
      }
    },

    // 点赞 收藏 操作文章
    async operateArticle(type) {
      // 如果用户未登录 不能操作
      if (!localStorage.user_id) {
        return this.$showMsg({ msg: "请请先登录!", type: "warning" });
      }
      let method = "add";
      if (this.articleItem[type]) {
        method = "delete";
      } else {
        method = "add";
        // 判断是否能被点赞\收藏
        if (type == "like" && !this.articleItem.isLike) {
          return this.$showMsg({ msg: "该文章不能被评论!", type: "warning" });
        } else if (type == "collection" && !this.articleItem.isCollection) {
          return this.$showMsg({ msg: "该文章不能被收藏!", type: "warning" });
        }
      }
      // 更新到数据库
      const { code } = await this.$http.get("/api/tweet/user_action", {
        params: {
          ac: method,
          type,
          aid: this.articleItem.id,
        },
      });
      if (code != 200) {
        return this.$showMsg({ msg: "操作失败！", type: "error" });
      }
      this.$emit("operateArticle", method, type, this.articleItem.id);
    },

    // 分享文章(获取二维码)
    async shareArticle() {
      const { code, msg, result } = await this.$http.get(
        "/api/tweet/share_tweet",
        {
          params: {
            aid: this.articleItem.id,
          },
        }
      );
      this.shareArticleUrl = result.url;
      this.shareArticleQRCode = result.qr_code;
      if (code != 200) {
        return this.$showMsg({ msg: "操作失败！", type: "error" });
      }
    },

    // 关注、取消关注博主
    async focusArticle() {
      // 如果用户未登录 不能查看
      if (!localStorage.user_id) {
        return this.$showMsg({ msg: "请请先登录!", type: "warning" });
      }
      let method = "add";
      if (this.articleItem["focus"]) {
        method = "delete";
      } else {
        method = "add";
      }
      // 更新到数据库
      const { code } = await this.$http.get("/api/user/relation", {
        params: {
          action: method,
          toUserId: this.articleItem.userId,
        },
      });
      if (code != 200) {
        return this.$showMsg({ msg: "操作失败！", type: "error" });
      }
      this.$emit("focusArticle", this.articleItem.userId);
    },

    // 点击更多操作图标
    async clickMoreMenu(item) {
      // 如果用户未登录 不能查看
      if (!localStorage.user_id) {
        return this.$showMsg({ msg: "请请先登录!", type: "warning" });
      }
      if (item == "collection") {
        // 收藏 取消收藏
        this.operateArticle("collection");
      } else if (item == "focus") {
        // 取消关注
        this.focusArticle();
      } else if (item == "copyLink") {
        // 生成分享链接二维码
        if (this.articleItem.isForward) {
          await this.shareArticle();
          this.copyLink();
        } else this.$showMsg({ msg: "该文章不能被分享!", type: "warning" });
      }
    },

    // 选择表情包
    selectEmoji(emoji) {
      this.commentForm.commentContext += emoji.data;
    },

    // 发表评论
    async giveComment(level = 1) {
      // 如果用户未登录
      if (!localStorage.access_token) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      if (!this.articleItem.isComment) {
        return this.$showMsg({ msg: "该文章不能被评论!", type: "warning" });
      }
      // level = 1 评论文章
      this.commentForm.tweetId = this.articleItem.id;
      this.commentForm.userId = localStorage.user_id;
      if (level == 1) {
        this.commentForm.toUserId = 0;
        this.commentForm.pid = 0;
      }
      console.log(this.commentForm);
      if (this.commentForm.commentContext.trim() == "") {
        this.$showMsg({ msg: "评论内容不能为空！" });
      }
      // 发表一级评论
      const { code, msg, result } = await this.$http.post(
        "/api/comment/comment_add",
        this.commentForm
      );
      if (code != 200) {
        return this.$showMsg({ type: "error", msg: "评论失败！" });
      }
      console.log(result, "发表评论的返回值");
      console.log(this.commentForm);

      if (level == 1) {
        //  直接评论文章
        // 更新评论
        this.commentList.push(result);
        console.log(this.commentList);
      } else if (level == 2) {
        //  直接评论文章
        // 更新评论
        this.commentList = [];
        this.getCommentList();
        // 关闭评论对话框 二级评论
        this.answerCommentDialogVisible = false;
      }
      // 重置评论内容
      this.commentForm.commentContext = "";
      return this.$showMsg({ type: "success", msg: "评论成功！" });
    },

    // 查看更多的二级评论
    showMoreComment2(itemIndex) {
      // 如果用户未登录
      if (!localStorage.access_token) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      // 弹出二级评论对话框
      this.isShowComment2 = !this.isShowComment2;
      // 当前弹出的评论列表项
      this.commentItemIndex = itemIndex;
    },
    // 跳转到评论详情页
    toCommentDetail() {
      // 如果用户未登录
      if (!localStorage.access_token) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      if (this.parentComponent == 0)
        this.$router.push({
          path: "/comment",
          query: {
            id: this.articleItem.id,
          },
        });
    },

    //删除文章
    deleteArticle() {
      // 如果用户未登录
      if (!localStorage.access_token) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      this.$confirm("确定删除该文章吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 删除文章
          const { code, msg, result } = await this.$http.get(
            "/api/tweet/tweet_delete",
            {
              params: { aid: this.articleItem.id },
            }
          );
          if (code != 200) {
            return this.$showMsg({
              msg: "删除文章失败！",
              type: "error",
            });
          }
          // 本地更新删除成功的文章
          this.$emit("deleteArticle", this.articleItem);
          return this.$showMsg({
            msg: "删除文章成功！",
            type: "success",
          });
        })
        .catch(() => {});
    },

    // 展示修改文章对话框
    showEditDialog() {
      for (let item in this.editArticleForm) {
        this.editArticleForm[item] = this.articleItem[item] == 1 ? true : false;
      }
      console.log(this.editArticleForm, this.articleItem);
      this.editArticleDialogVisible = true;
    },

    // 编制文章的关闭事件
    editArticleDialogClose() {
      this.$refs.reviseAccountFormRef.resetFields();
    },
    // 重置修改文章表单
    resetEditArticle() {
      this.$refs.reviseAccountFormRef.resetFields();
    },
    // 编辑文章 发送
    async editArticle() {
      let array = [
        "ipAddress",
        "longitude",
        "dimension",
        "qrCode",
        "forwardCount",
        "collectionCount",
        "commentCount",
        "likeCount",
        "viewCount",
        "status",
        "updateTime",
      ];
      let editArticleForm = {};
      for (let item in this.articleItem) {
        if (!array.includes(item))
          editArticleForm[item] = this.articleItem[item];
      }

      for (let item in this.editArticleForm) {
        editArticleForm[item] = this.editArticleForm[item] ? 1 : 0;
      }

      const { code, msg, result } = await this.$http.post(
        "/api/tweet/tweet_update",
        editArticleForm
      );
      if (code != 200) {
        return this.$showMsg({
          msg: "编辑文章失败！",
          type: "error",
        });
      }
      // 通知父组件更新数据
      this.$emit("updateArticle", this.editArticleForm, this.articleItem.id);
      this.editArticleDialogVisible = false;
      return this.$showMsg({
        msg: "编辑文章成功！",
        type: "success",
      });
    },
    // 展示分享对话框
    async showShareDialog() {
      // 如果用户未登录 不能查看
      if (!localStorage.user_id) {
        return this.$showMsg({ msg: "请请先登录!", type: "warning" });
      }
      // 生成分享链接二维码
      if (this.articleItem.isForward) await this.shareArticle();
      else return this.$showMsg({ msg: "该文章不能被分享!", type: "warning" });
    },
    // 操作：点击了复制按钮
    async copyLink() {
      this.$copyText(this.shareArticleUrl)
        .then((message) => {
          this.$showMsg({ msg: "复制成功!", type: "success" });
        })
        .catch((err) => {});
    },
  },
};
</script>
<style scoped lang="less">
.box-card {
  margin-bottom: 10px;
  position: relative;
  overflow: visible;
  .mine-article-header-pic {
    width: 100%;
    padding: 10px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .mine-article-content-wrap-right {
    // 显示编辑按钮
    &:hover .mine-article-top-right .detele-edit-wrap {
      visibility: visible;
    }
    padding-left: 10px;
    .mine-article-top-left {
      display: flex;
      flex-direction: column;
      margin-top: 20px;

      .mine-article-top-left-title {
        text-align: left;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 550;
        color: #333;
      }
      .mine-article-top-left-time {
        text-align: left;
        font-size: 12px;
        color: #939393;
      }
    }
    .mine-article-top-right {
      display: flex;
      justify-content: right;
      .attention-wraper {
        .focus {
          max-width: 60px;
          border: 1px #ff8200 solid;
          color: #ff8200;
          padding: 6px 10px;
          border-radius: 20px;
          font-size: 12px;
          margin-right: 5px;
          cursor: pointer;
        }
        .isFocus {
          border: 1px #333 solid;
          color: #333;
        }
      }

      .more-operate {
        .el-icon-arrow-down {
          cursor: pointer;
          margin-top: 5px;
          font-weight: 400;
          font-size: 16px;
          color: black;
        }
      }

      .detele-edit-wrap {
        display: flex;
        height: 100%;
        align-items: center;
        margin-left: 10px;
        visibility: hidden;
        .detele {
          cursor: pointer;
          margin-top: 5px;
          font-weight: 400;
          font-size: 16px;
          color: black;
          margin-right: 10px;
        }
        .edit {
          cursor: pointer;
          margin-top: 5px;
          font-weight: 400;
          font-size: 16px;
          color: black;
        }
      }
    }

    .content-wrap-text {
      color: #333;
      font-size: 14px;
      text-align: left;
      margin-bottom: 10px;
    }

    .image-video-wrap {
      width: 100%;
      // 图片样式
      .images-wrap {
        width: 100%;
        text-align: start;
        .image-1 {
          width: 250px;
          height: 250px;
          border-radius: 5px;
        }
        // 视频
        .video {
          width: 300px;
        }

        .image-2 {
          width: 250px;
          height: 250px;
          margin-right: 5px;
          border-radius: 5px;
        }

        .image-3 {
          width: 200px;
          height: 200px;
          margin-right: 5px;
          border-radius: 5px;
        }

        .image-4 {
          width: 210px;
          height: 210px;
          margin-right: 5px;
          border-radius: 5px;
        }

        .image-5-9 {
          width: 200px;
          height: 200px;
          margin-right: 5px;
          border-radius: 5px;
        }
      }
    }

    .hudon-wrap {
      font-size: 16px;
      color: #808080;
      margin-top: 10px;
      span {
        text-align: left;
      }
      .hudon-share {
        &:hover {
          color: #ff8200;
          cursor: pointer;
        }
        .active {
          color: #ff8200;
        }
        .share-wrap {
          width: 100%;
          .el-image {
            width: 150px;
            height: 150px;
          }
          .copy-wrap {
            display: flex;
            .el-input {
              width: 150px;
            }
            .el-button {
              font-size: 12px;
            }
          }
        }
      }
      .hudon-chat {
        &:hover {
          color: #ff8200;
          cursor: pointer;
        }
      }
      .hudon-dianzhan {
        &:hover {
          color: #ff8200;
          cursor: pointer;
        }
        .active {
          color: #ff8200;
        }
      }
      .activeComment {
        color: #ff8200;
      }
    }
  }

  //   发表评论输入框
  .comment-send-wrap {
    border-top: 1px solid rgb(240, 240, 240);
    border-bottom: 1px solid rgb(240, 240, 240);
    margin-top: 5px;
    padding-bottom: 10px;
    .comment-send-pic {
      width: 100%;
      padding: 10px;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
    }
    .comment-send-input-give {
      margin-top: 10px;
      .icon-emo {
        margin-top: 10px;
        text-align: left;

        .icon-xiaolian {
          font-size: 18px;
          font-weight: 400;
          cursor: pointer;
        }

        .active {
          color: #ff8200;
        }

        .emoji-picker-wrap {
          position: relative;
          overflow: visible;
          .emoji-picker {
            position: absolute;

            top: 2px;
            z-index: 2;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          }
        }
      }
      .comment-give-button {
        text-align: right;
        margin-top: 10px;
        cursor: pointer;
        .comment-give-text {
          background-color: rgba(#ff8200, 0.6);
          padding: 8px 15px;
          border-radius: 15px;
          font-weight: 600;
          color: white;
        }
      }
    }
  }

  // 评论区域（暂时不要）
  .comment-wrap {
    .comment-article-header-pic1 {
      width: 100%;
      padding: 10px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .comment-article-wrap1 {
      margin-left: 5px;
      .comment-article-name1-text {
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: left;
        font-size: 12px;
        color: #333;
        .comment-article-name1 {
          color: #eb7350;
        }
        .comment-article-text1 {
        }
      }
      .comment-article-time1 {
        text-align: left;
        font-size: 12px;
        color: #939393;
      }
      .comment-article-hudon-wrap1 {
        width: 100%;
        text-align: right;
        display: flex;
        justify-content: right;
        .hudon {
          font-size: 16px;
          color: #808080;
          cursor: pointer;
          span {
            text-align: right;
          }
        }
        .active {
          color: #ff8200;
        }
        .el-icon-delete {
          visibility: hidden;
        }
        .show {
          .el-icon-delete {
            visibility: visible;
          }
        }
      }
    }

    .comment-article-wrap2 {
      margin-left: 5px;
      margin-top: 10px;
      margin-bottom: 5px;
      padding-left: 8px;
      border-left: 1px solid rgb(230, 230, 230);

      .comment-article-name2-text {
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: left;
        font-size: 12px;
        color: #333;
        .comment-article-name2 {
          color: #eb7350;
        }
        .comment-article-text2 {
        }
      }
      .comment-article-time2 {
        text-align: left;
        font-size: 12px;
        color: #939393;
      }
      .comment-article-hudon-wrap2 {
        opacity: 0;
        width: 100%;
        text-align: right;
        display: flex;
        justify-content: right;
        &:hover {
          opacity: 1;
        }
        .hudon {
          font-size: 16px;
          color: #808080;
          cursor: pointer;
          span {
            text-align: right;
          }
        }
        .active {
          color: #ff8200;
        }
        .el-icon-delete {
          visibility: hidden;
        }
        .show {
          .el-icon-delete {
            visibility: visible;
          }
        }
      }
      // 查看二级更多的评论
      .more-comment2 {
        padding-top: 5px;
        text-align: left;
        color: #333;
        font-size: 12px;
        height: 20px;
        cursor: pointer;
      }
    }

    // 底部展开更多评论
    .more-comment {
      border-top: rgb(240, 240, 240) 1px solid;
      margin-top: 5px;
      padding-top: 10px;
      text-align: center;
      color: #333;
      font-size: 14px;
      height: 20px;
      cursor: pointer;
    }
  }
}

// 二级评论展示对话框
.comment-dialog-wrap {
  .comment-article-header-pic1 {
    width: 100%;
    padding: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .comment-article-wrap1 {
    margin-left: 5px;
    .comment-article-name1-text {
      margin-top: 10px;
      margin-bottom: 5px;
      text-align: left;
      font-size: 12px;
      color: #333;
      .comment-article-name1 {
        color: #eb7350;
      }
      .comment-article-text1 {
      }
    }
    .comment-article-time1 {
      text-align: left;
      font-size: 12px;
      color: #939393;
    }
    .comment-article-hudon-wrap1 {
      width: 100%;
      text-align: right;
      display: flex;
      justify-content: right;
      .hudon {
        font-size: 16px;
        color: #808080;
        cursor: pointer;
        span {
          text-align: right;
        }
      }
      .active {
        color: #ff8200;
      }
    }
  }

  .comment-article-wrap2 {
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    padding-left: 8px;
    border-left: 1px solid rgb(230, 230, 230);

    .comment-article-name2-text {
      margin-top: 10px;
      margin-bottom: 5px;
      text-align: left;
      font-size: 12px;
      color: #333;
      .comment-article-name2 {
        color: #eb7350;
      }
      .comment-article-text2 {
      }
    }
    .comment-article-time2 {
      text-align: left;
      font-size: 12px;
      color: #939393;
    }
    .comment-article-hudon-wrap2 {
      opacity: 0;
      width: 100%;
      text-align: right;
      display: flex;
      justify-content: right;
      &:hover {
        opacity: 1;
      }
      .hudon {
        font-size: 16px;
        color: #808080;
        cursor: pointer;
        span {
          text-align: right;
        }
      }
      .active {
        color: #ff8200;
      }
      .el-icon-delete {
        visibility: hidden;
      }
      .show {
        .el-icon-delete {
          visibility: visible;
        }
      }
    }
    // 查看二级更多的评论
    .more-comment2 {
      padding-top: 5px;
      text-align: left;
      color: #333;
      font-size: 12px;
      height: 20px;
    }
  }

  // 底部展开更多评论
  .more-comment {
    border-top: rgb(240, 240, 240) 1px solid;
    margin-top: 5px;
    padding-top: 10px;
    text-align: center;
    color: #333;
    font-size: 14px;
    height: 20px;
  }
}

// 二级评论回复对话框
.answer-wrap {
  margin-top: 10px;
  .icon-emo {
    margin-top: 10px;
    text-align: left;
    .icon-xiaolian {
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
    }
    .active {
      color: #ff8200;
    }
    .emoji-picker-wrap {
      position: relative;
      .emoji-picker {
        position: absolute;
        top: 2px;
        z-index: 2;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      }
    }
  }
  .comment-give-button {
    text-align: right;
    margin-top: 10px;
    cursor: pointer;
    .comment-give-text {
      background-color: rgba(#ff8200, 0.6);
      padding: 8px 15px;
      border-radius: 15px;
      font-weight: 600;
      color: white;
    }
  }
}

// 编制文章对话框
.dialog-footer {
  text-align: center;
  /deep/.el-form-item__content {
    text-align: left;
  }
  .login-wrap {
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    font-weight: 540;
    .login {
      width: 120px;
      background-color: #ffa00a;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      border-radius: 10px;
    }
  }
  .reset-wrap {
    width: 100%;
    font-weight: 550;
    display: flex;
    justify-content: center;
    .reset {
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      color: #939393;
    }
  }
}
</style>